import React from 'react';
import Ux from 'ux';
import Ex from 'ex';
import Op from './Op';
import {Icon, Select} from 'antd'
import './Cab.less';

const componentInit = (reference) => {
    const state = {};
    const {data = {}, value} = reference.props;
    Ux.ajaxGet("/api/ui/list-qr/:code", data)
        .then($qbe => Ux.promise(Op.configQr($qbe, state)))
        .then(Ux.ready)
        .then(state => {
            // 还原选项
            if (value) {
                state.$qbeValue = value;
            }
            Ux.fn(reference).rxQBE(state.$qbeValue);
            reference.setState(state);
        })
}

class Component extends React.PureComponent {
    componentDidMount() {
        componentInit(this);
    }

    render() {
        return Ex.yoRender(this, () => {
            const {$qbe = []} = this.state;
            const {value} = this.props;
            return (
                <Select className={"qx-qbe"}
                        value={value}
                        onChange={Op.rxChange(this)}>
                    {$qbe.map(item => (
                        <Select.Option key={item.key} value={item.value}>
                            {item.icon ? (<Icon {...item.icon}/>) : false}
                            {item.icon ? (<span>&nbsp;&nbsp;</span>) : false}
                            {item.label}
                        </Select.Option>
                    ))}
                </Select>
            );
        }, Ex.parserOfColor("QxQBE").private({off: true}))
    }
}

export default Component